<script setup lang="ts">
import { ref } from 'vue'
import { useHospitalStore } from '@/store/modules/hospitalStore'
import { storeToRefs } from 'pinia'
const hospitalStore = useHospitalStore()
const { hoscodeData, departmentData } = storeToRefs(hospitalStore)
// 控制科室高亮
const currentIndex = ref<number>(0)
const dev = ref<HTMLElement[] | any>()
/**左侧科室点击事件 */
const changeIndex = ($event: MouseEvent) => {
  const tage: HTMLElement = $event.target as HTMLElement
  if (tage.dataset && tage.dataset.index) {
    currentIndex.value = Number(tage.dataset.index)
    dev.value.forEach((item: HTMLElement) => {
      if (item.dataset.index === tage.dataset.index) {
        item.scrollIntoView({
          behavior: 'smooth',
        })
      }
    })
  }
}
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
/** 点击开始挂号预约 */
const toRegister = ($event: MouseEvent) => {
  const tage: HTMLElement = $event.target as HTMLElement
  if (tage && tage.dataset.depcode) {
    router.push({
      name: 'RegisterFirstStep',
      query: {
        code: route.query.code,
        depcode: tage.dataset.depcode,
      },
    })
  }
}
</script>

<template>
  <!-- 医院名称 -->
  <div class="title">
    <h1>{{ hoscodeData.hospital?.hosname }}</h1>
    <div class="hostype">
      <svg-icon name="dianzan"></svg-icon>
      <span>{{ hoscodeData.hospital?.param.hostypeString }}</span>
    </div>
  </div>
  <!-- 医院展现信息 -->
  <div class="content">
    <div class="content_left" v-if="hoscodeData.hospital?.logoData">
      <img :src="'data:image/jpeg;base64,' + hoscodeData.hospital?.logoData" alt="" />
    </div>
    <div class="content_right">
      <!-- 挂号规则 -->
      <div>
        <h3 class="h3Name">挂号规则</h3>
        <!-- 预约周期 -->
        <p class="regName">预约周期:10天 放号时间：{{ hoscodeData.bookingRule?.releaseTime }} 结束时间：{{ hoscodeData.bookingRule?.stopTime }}</p>
        <!-- 具体地址 -->
        <p class="regName">具体地址：{{ hoscodeData.hospital?.param.fullAddress }}</p>
        <!-- 规划路线 -->
        <p class="regName">规划路线：{{ hoscodeData.hospital?.route }}</p>
        <!-- 退号时间 -->
        <p class="regName">退号时间：就诊前一工作日{{ hoscodeData.bookingRule?.quitTime }}前取消</p>
      </div>
      <!-- 预约规则 -->
      <div>
        <h3 class="h3Name">预约规则</h3>
        <p class="regName" v-for="(item, index) in hoscodeData.bookingRule?.rule" :key="index">{{ item }}</p>
      </div>
    </div>
  </div>
  <!-- 医院科室展示 -->
  <div class="deparment">
    <div class="leftNav">
      <ul @click="changeIndex">
        <li :class="{ active: index === currentIndex }" v-for="(item, index) in departmentData" :key="index" :data-index="index">
          {{ item.depname }}
        </li>
      </ul>
    </div>
    <div class="rightView">
      <div class="showDepartment" v-for="(dev, i) in departmentData" :key="i">
        <h1 :data-index="i" ref="dev">{{ dev.depname }}</h1>
        <!-- 大科室分类 -->
        <ul @click="toRegister">
          <li v-for="(item, index) in dev.children" :key="index" :data-depcode="item.depcode">
            {{ item.depname }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  display: flex;
  height: 50px;
  align-items: center;
  h1 {
    font-size: 25px;
    font-weight: bold;
  }
  .hostype {
    height: 100%;
    margin-left: 10px;
    display: flex;
    align-items: center;
    color: #c6c6c6;
    font-size: 14px;
    span: {
      margin-left: 5px;
    }
  }
}
.content {
  display: flex;
  margin-top: 20px;
  .content_left {
    width: 80px;
    flex-shrink: 0;
    img {
      width: 80px;
      height: 80px;
      border-radius: 90px;
    }
  }
  .content_right {
    margin-left: 40px;
    div {
      margin-bottom: 15px;
    }
    .regName {
      color: #5f6368;
      font-size: 14px;
      margin: 10px 0;
    }
    .h3Name {
      font-size: 16px;
      color: #222222fc;
      font-weight: bold;
    }
  }
}
.deparment {
  display: flex;
  width: 100%;
  height: 500px;
  overflow: hidden;
  .leftNav {
    width: 90px;
    height: 100%;
    flex-shrink: 0;
    ul {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: rgb(248, 248, 248);
      li {
        flex: 1;
        color: #747474;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        &.active {
          border-left: 5px solid red;
          color: red;
          background-color: #fff;
        }
      }
    }
  }
  .rightView {
    flex: 1;
    margin-left: 20px;
    height: 100%;
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .showDepartment {
      h1 {
        background-color: rgb(248, 248, 248);
        color: #7f7f7f;
        line-height: 30px;
        font-weight: bold;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        li {
          width: 33%;
          line-height: 30px;
          color: #747474;
          font-size: 14px;
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
    }
  }
}
</style>
